@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    font-family: 'Caveat', 'Inter', 'SF Pro Display', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    background: transparent;
  }
  body {
    @apply min-h-screen bg-transparent;
  }
}

@layer components {
  .glass-box {
    @apply bg-white/10 backdrop-blur-md rounded-2xl shadow-xl border border-white/20;
  }
  .glass-btn-3d {
    @apply relative px-6 py-3 rounded-xl font-semibold text-lg transition-all duration-300 cursor-pointer overflow-hidden;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 
      0 8px 32px rgba(0,0,0,0.1),
      inset 0 1px 0 rgba(255,255,255,0.2),
      0 0 0 1px rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    color: #2d3748;
  }
  .glass-btn-3d:hover {
    transform: translateY(-2px);
    box-shadow: 
      0 12px 40px rgba(0,0,0,0.15),
      inset 0 1px 0 rgba(255,255,255,0.3),
      0 0 0 1px rgba(255,255,255,0.2);
  }
  .glass-btn-3d:active {
    transform: translateY(0);
    box-shadow: 
      0 4px 20px rgba(0,0,0,0.1),
      inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .particle-container {
    @apply absolute inset-0 pointer-events-none;
  }
  .particle {
    @apply absolute w-1 h-1 bg-white/30 rounded-full;
    animation: float 3s ease-in-out infinite;
  }
  .neon-input {
    @apply w-full px-4 py-2 rounded-lg bg-white/10 border border-cyan-400 text-white placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-cyan-400 focus:border-cyan-400 transition-all duration-200;
    box-shadow: 0 0 0 1.5px #00c6ff44;
  }
  .rainbow-bg {
    background: linear-gradient(
      45deg,
      rgba(255, 0, 0, 0.1),
      rgba(255, 165, 0, 0.1),
      rgba(255, 255, 0, 0.1),
      rgba(0, 255, 0, 0.1),
      rgba(0, 0, 255, 0.1),
      rgba(238, 130, 238, 0.1),
      rgba(255, 0, 255, 0.1)
    );
    background-size: 400% 400%;
    animation: rainbow-shift 8s ease-in-out infinite;
  }
  .handwriting-text {
    font-family: 'Caveat', cursive;
  }
}

@layer utilities {
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translate(-50%, 1rem);
    }
    to {
      opacity: 1;
      transform: translate(-50%, 0);
    }
  }

  .animate-fade-in-up {
    animation: fadeInUp 0.3s ease-out;
  }
  
  @keyframes rainbow-shift {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  
  @keyframes float {
    0%, 100% {
      transform: translateY(0px) translateX(0px);
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    90% {
      opacity: 1;
    }
    50% {
      transform: translateY(-20px) translateX(10px);
      opacity: 0.8;
    }
  }
}

/* 移动端优化 */
@media (max-width: 640px) {
  .coin-animation-container {
    height: 200px; /* 在移动端减小动画区域高度 */
  }
  
  .motivation-message {
    width: 90%;
    max-width: none;
  }
} 